<template>
	<div class="wrapper">
		<header>
			<p>支付成功</p>
		</header>
		
		<div class="success-message">
			<i class="fa fa-check-circle"></i>
			<p>支付成功！</p>
			<p>订单号：{{ orderId }}</p>
		</div>
		
		<div class="back-button">
			<button @click="goToIndex">返回首页</button>
		</div>
		
		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from '../components/Footer.vue';
	export default {
		name: 'PaymentSuccess',
		data() {
			return {
				orderId: this.$route.query.orderId || ''
			}
		},
		methods: {
			goToIndex() {
				this.$router.push('/index');
			}
		},
		components: {
			Footer
		}
	}
</script>

<style scoped>
	.success-message {
		text-align: center;
		padding: 20vw 0;
	}
	.success-message .fa-check-circle {
		font-size: 20vw;
		color: #38CA73;
		margin-bottom: 5vw;
	}
	.success-message p {
		font-size: 4vw;
		margin: 2vw 0;
	}
	.back-button {
		padding: 0 4vw;
	}
	.back-button button {
		width: 100%;
		height: 10vw;
		background-color: #0097FF;
		color: white;
		border: none;
		border-radius: 4px;
		font-size: 4vw;
	}
</style>